<template>
  <view class="login">
    <view class="content">
      <view class="header">
        <image src="@/static/logo.png"></image>
      </view>
      <view class="main">
        <u-form ref="uForm" :model="form" label-width="160rpx">
          <u-form-item prop="username" required label="账号" left-icon="account">
            <u-input v-model="form.username" placeholder="请输入账号" focus />
          </u-form-item>
          <!-- <u-form-item prop="phonenumber" required label="手机号" left-icon="phone">
            <u-input v-model="form.phonenumber" placeholder="请输入手机号" focus disabled />
            <view slot="right" style="zoom: 0.7" @click="getCaptchaImage">
              <u-button open-type="getPhoneNumber" @bindgetphonenumber="handleBindgetphonenumber">绑定手机号</u-button>
            </view>
          </u-form-item> -->
          <u-form-item prop="password" required label="密码" left-icon="lock">
            <u-input v-model="form.password" type="password" placeholder="请输入密码" />
          </u-form-item>
          <u-form-item prop="confirmPassword" required label="确认密码" left-icon="lock">
            <u-input v-model="form.confirmPassword" type="password" placeholder="请再次输入密码" />
          </u-form-item>
          <u-form-item prop="code" required label="验证码" :border-bottom="false" left-icon="more-circle">
            <u-input v-model="form.code" type="number" placeholder="请输入验证码" />
            <view slot="right" style="zoom: 0.7" @click="getCaptchaImage">
              <u-image :src="base64" width="284rpx" height="100rpx"></u-image>
            </view>
          </u-form-item>
        </u-form>
      </view>
      <wButton class="wbutton" text="注 册" :rotate="isRotate" @click="startLogin"></wButton>
    </view>
  </view>
</template>

<script>
import { onLoad, onReady } from 'uni-composition-api'
import { captchaImage, register } from '@/api/modules/login'
import { minCache } from '@/utils/min-cache'
import wButton from './components/watch-login/watch-button'
import { router } from '@/router'

export default {
  data() {
    return {
      isRotate: false, //是否加载旋转
      base64: '',
      options: {},
      form: {
        password: '',
        code: '',
        username: '',
        confirmPassword: '',
        phonenumber: '',
        uuid: '',
      },
      rules: {
        // phonenumber: [
        //   {
        //     required: true,
        //     message: '请输入手机号',
        //     trigger: ['change', 'blur'],
        //   },
        //   {
        //     pattern: /^1[3456789]\d{9}$/g,
        //     transform(value) {
        //       return String(value)
        //     },
        //     message: '手机号格式有误',
        //   },
        // ],
        username: [
          {
            required: true,
            message: '请输入账号',
            trigger: ['change', 'blur'],
          },
        ],
        password: {
          required: true,
          message: '请输入密码',
          trigger: ['change', 'blur'],
        },
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: ['change', 'blur'],
          },
          {
            type: 'number',
            message: '请输入数字',
          },
        ],
      },
    }
  },
  components: {
    wButton,
  },
  onLoad(options) {
    this.options = options
    this.getCaptchaImage()
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  methods: {
    handleBindgetphonenumber(e) {
      console.log(e)
    },
    async getCaptchaImage() {
      const { img, uuid, captchaEnabled } = await captchaImage({})
      this.base64 = 'data:image/gif;base64,' + img
      this.form.uuid = uuid
    },
    async startLogin(e) {
      const { password, confirmPassword } = this.form
      const valid = await this.$refs.uForm.validate()
      if (this.isRotate || !valid) {
        return false
      } else if (password !== confirmPassword) {
        uni.showToast({
          icon: 'none',
          title: '两次输入的密码不一样',
        })
        return
      }

      this.isRotate = true

      try {
        const { token } = await register(this.form)
        minCache.set('ut', token)
        uni.showToast({
          icon: 'success',
          title: '注册成功',
          duration: 2500,
          success: () => {
            this.isRotate = false
            router.replaceAll({
              name: 'UserLogin',
              params: this.options,
            })
          },
        })
      } catch (error) {
        uni.showToast({
          title: error.msg,
        })
        await this.getCaptchaImage()
        this.isRotate = false
      }
    },
  },
}
</script>

<style>
@import url('./components/watch-login/css/icon.css');
@import url('./css/main.css');
</style>
